<template>
	<view style="">
		<view class="fournav">
			<view :class="['',add_class==index?'seletext':'morentext']" v-for="(item,index) in menu" :key="index" @click="addClass(index)">
				{{item}}
			</view>
		</view>
		<view class="" v-if="type=='本轮统计'">
			<view class="midden" style="margin-top: 20px;">
				<view class="two">
					<text>第{{benlunList.z_lun}}轮全局统计</text>
				</view>
				<view>

					<view>
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
						</picker>
					</view>
				</view>
				<view class="chaxun" @click="chaxun">
					查询
				</view>
			</view>
			<view class="hiddencontent">
				<view class="" style="margin-bottom: 10px;">
					<text style="margin-right: 50px;">本轮总发包：{{benlunList.fb_money}}分</text>
					<text>本轮发包人数：{{benlunList.fb_rnum}}人</text>
				</view>
				<view class="" style="margin-bottom: 30px;">
					<text style="margin-right: 20px;">群主总盈亏：{{benlunList.qzyk.toFixed(1)}}分</text>
					<text>本轮抢包手抢包：{{benlunList.qb_money}}分</text>
				</view>
			</view>
			<t-table>
				<t-tr>
					<t-th>期数</t-th>
					<t-th>发包者</t-th>
					<t-th>包名/类型</t-th>
					<t-th>中雷</t-th>
					<t-th>变动</t-th>
				</t-tr>
				<t-tr v-for="(items,indexs) in benlunList.list" :key="indexs">
					<t-td>{{items.lun_num}}</t-td>
					<t-td>{{items.nickname}}</t-td>
					<t-td>{{items.b_num+'包/'+items.y_number}}</t-td>
					<t-td>{{items.zls}}</t-td>
					<t-td>{{items.jfbd}}</t-td>
				</t-tr>
			</t-table>
		</view>

		<view class="" v-if="type=='玩家统计'">

			<t-table style="margin-top: 35px;">
				<t-tr>
					<t-th>玩家</t-th>
					<t-th>发包金额</t-th>
					<t-th>抢包多少</t-th>
					<t-th>总流水</t-th>
					<t-th>福利</t-th>
				</t-tr>
				<t-tr v-for="(items,indexs) in quanjuList" :key="indexs">

					<t-td>{{items.nickname}}</t-td>
					<t-td>{{items.fbje}}</t-td>
					<t-td>{{items.qbje}}</t-td>
					<t-td>{{items.zls}}</t-td>
					<t-td>{{items.lsbl.toFixed(1)}}</t-td>
				</t-tr>
			</t-table>

		</view>


		<view class="contentliu" v-if="type=='玩家流水'">
			<view class="midden">
				<view class="two">
					<text>第{{wanjialiushuiList.z_lun}}轮全局统计</text>
				</view>
				<view>
					<picker @change="bindPickerChange1" :value="index1" :range="array1">
						<view class="uni-input">{{array1[index1]}}</view>
					</picker>

				</view>
				<view class="chaxun" @click="wanjiachaxun">
					查询
				</view>
			</view>
			<view class="xiala" style="display: flex;flex-direction: column;" v-if="liushuilistshow">
				<text @click="liushuiwanjia">玩家</text>
				<text @click="liushuituoshou">托手</text>
			</view>
			<view @click="copy(wanjialiushuiList.list)">复制数据</view>
			<t-table>
				<t-tr>
					<t-th>轮数</t-th>
					<t-th>玩家</t-th>
					<t-th>包数</t-th>
					<t-th>金额</t-th>
					<t-th>发包流水</t-th>
					<t-th>玩家亏盈</t-th>
					<!-- <t-th>复制数据</t-th> -->
				</t-tr>
				<t-tr v-for="(items,indexs) in wanjialiushuiList.list" :key="indexs">
					<t-td>{{items.lun_num}}</t-td>
					<t-td>{{items.nickname}}</t-td>
					<t-td>{{items.b_num}}</t-td>
					<t-td>{{items.money}}</t-td>
					<t-td>{{items.fb}}</t-td>
					<t-td>{{items.yk.toFixed(2)}}</t-td>
				</t-tr>
			</t-table>

		</view>
		
	</view>
</template>

<script> 
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {

			return {
				title: 'picker',
				listshow: false,
				tongjilistshow: false,
				liushuilistshow: false,
				add_class: 0,
				type: "本轮统计",
				menu: ["本轮统计", "全局统计", "玩家流水"],
				listBoxStyle: `height: 30px; font-size: 16px;`,
				list: [
					'玩家',
					'托手',
					'全部'
				],
				selename: '全部',
				tongjiname: '全部',
				liushuiname: '全部',
				id: '',
				benlunList: [],
				quanjuList: [],
				wanjialiushuiList: [],
				array: ['请选择期数', 1, 2, 3, 4, 5],
				index: 0,
				array1: ['请选择期数', 1, 2, 3, 4, 5],
				index1: 0,
				pickerText: '请选择期数',
				pickerText1: '请选择期数'
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.benlun();
		},
		methods: {
			copy(value){
			  //提示模板
				// console.log(value)
			  uni.showModal({
			    content:'是否复制',//模板中提示的内容
			    confirmText:'复制',
			    success:()=>{//点击复制内容的后调函数
			      //uni.setClipboardData方法就是讲内容复制到粘贴板
			      uni.setClipboardData({
			        data:value,//要被复制的内容
			        success:()=>{//复制成功的回调函数
			          uni.showToast({//提示
			            title:'复制成功',
									icon:'none'
			          })
								console.log(value)
			        },
							fail:()=>{
								uni.showToast({
								  title:'复制失败',
									icon:'none'
								})
							}
			      });
			    }
			  });
			},
			chaxun() {
				if (this.pickerText == '请选择期数') {
					uni.showToast({
						title: "请选择期数",
						icon: "none"
					})
					return
				}
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/lz/jkt',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						id: this.id,
						lun: this.pickerText
					},
					success: res => {
						console.log(res)
						this.benlunList = res.data.data
						console.log("本轮结果")

					}
				})
			},
			wanjiachaxun() {
				if (this.pickerText1 == '请选择期数') {
					uni.showToast({
						title: "请选择期数",
						icon: "none"
					})
					return
				}
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/lz/jkt',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						id: this.id,
						lun: this.pickerText1
					},
					success: res => {
						console.log(res)
						this.wanjialiushuiList = res.data.data
						console.log("本轮结果")

					}
				})
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.pickerText = this.array[e.detail.value]
				console.log(this.pickerText)
			},
			bindPickerChange1: function(e) {
				this.index1 = e.target.value
				this.pickerText1 = this.array1[e.detail.value]
			},
			benlun() {
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/lz/jkt',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						id: this.id
					},
					success: res => {
						console.log(res)
						this.benlunList = res.data.data
						console.log("本轮结果")

					}
				})
			},
			test() {
				uni.navigateBack({
					delta: 1
				})
			},
			addClass(index) {
				this.add_class = index;
				// console.log(this.add_class)
				if (index == 2) {
					this.type = "玩家流水"
					console.log("第三个")
					let token = uni.getStorageSync("token")
					uni.request({
						url: this.G_base + '/api/lz/wjls',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'Authori-zation': 'Bearer ' + token
						},
						data: {
							id: this.id,
						},
						success: res => {
							console.log(res)
							this.wanjialiushuiList = res.data.data
							console.log("玩家统计de jieguo")

						}
					})
				} else if (index == 1) {
					this.type = "玩家统计"
					console.log("全部")
					let token = uni.getStorageSync("token")
					uni.request({
						url: this.G_base + '/api/lz/qjls',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'Authori-zation': 'Bearer ' + token
						},
						data: {
							id: this.id,
						},
						success: res => {
							console.log(res)
							this.quanjuList = res.data.data
							console.log("玩家统计de jieguo")

						}
					})
				} else if (index == 0) {
					console.log("本轮统计的结果展示")
					this.type = "本轮统计"
				}
			},
			visibleChange(isShow) { // 列表框的显示隐藏事件
				console.log('isShow::', isShow);
			},
			selectcont() {
				this.show = !this.show
				console.log("选择下拉框")
				this.listshow = !this.listshow
			},
			liushuiselect() {
				this.liushuilistshow = !this.liushuilistshow
			},
			tongjiselect() {
				this.tongjilistshow = !this.tongjilistshow
			},
			wanjia() {
				this.selename = "玩家"
				this.listshow = false
			},
			tuoshou() {
				this.selename = "托手"
				this.listshow = false
			},
			tongjiwanjia() {
				this.tongjiname = "玩家"
				this.tongjilistshow = false
			},
			tongjituoshou() {
				this.tongjiname = "托手"
				this.tongjilistshow = false
			},
			liushuiwanjia() {
				this.liushuiname = "玩家"
				this.liushuilistshow = false
			},
			liushuituoshou() {
				this.liushuiname = "托手"
				this.liushuilistshow = false
			},
			change({
				newVal,
				oldVal,
				index,
				orignItem
			}) {
				console.log(newVal, oldVal, index, orignItem);
			}

		},
	}
</script>

<style scoped>
	.tab {
		width: 96%;
		font-size: 18px;
		margin: 0 auto;
		margin-top: 20px;
		text-align: center;
	}

	.selectlist text {
		margin-right: 10px;
		font-size: 15px;

	}

	.selectlist {
		height: 30px;
		display: inline-block;
		width: 100px;
		position: relative;
		vertical-align: middle;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		overflow: hidden;
		background-color: #FAFAFA;
		color: #555;
		text-shadow: none;
		border-radius: 4px;
		transition: box-shadow 0.25s ease;
		z-index: 2;
	}

	.select:hover {
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	}

	.select:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-top-color: #ccc;
		top: 14px;
		right: 10px;
		cursor: pointer;
		z-index: -2;
	}

	.select {
		margin-left: 20px;
	}

	.select select {

		cursor: pointer;
		width: 100%;
		border: none;
		background: transparent;
		background-image: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}

	.select select:focus {
		outline: none;
	}

	.answer {}

	.muen text {
		flex-direction: row;
		font-size: 12px;
		margin: 10px 10px;

		height: 16px;
	}

	.muen:nth-child(1) {
		margin-left: 10px;
	}

	.muen {
		width: 100%;
		display: flex;
		justify-content: space-around;
		/* align-items: center; */
		flex-direction: row;
	}

	.fivemenu {

		display: flex;
		flex-direction: column;
	}

	.hiddencontent {
		margin-top: 70px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: 20px;
		font-size: 14px;
		color: #C3c3c3;
	}

	.midden {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
		margin-top: 20px;
		margin-bottom: 60px;
	}

	.midden .two {
		margin-left: 14px;
		font-size: 16px;
	}

	.midden .chaxun {
		font-size: 16px;
		background-color: #FAFAFA;
		width: 60px;
		height: 30px;
		border-radius: 10px;
		margin-right: 20px;
		line-height: 30px;
		text-align: center;
	}

	.fournav view {
		margin-left: 5px;
	}

	.fournav {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 20px;
	}

	.seletext {
		color: rgba(16, 16, 16, 1);
		font-size: 20px;
		text-align: left;
		font-family: PingFangSC-regular;
		border-bottom: 5px solid #9e0000;
		border-radius: 3px;
		margin-right: 15upx;
	}

	.morentext {
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-right: 15upx;
	}

	.xiala text {
		padding: 3px 0;
	}

	.xiala {
		position: absolute;
		top: 15%;
		left: 47%;
		width: 100px;
		height: 30px;
		font-size: 15px;
		display: flex;
		justify-content: center;
	}
</style>
